import Patch from './patch.mdx'

# Mpx

## 安装

```bash npm2yarn
npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss
```

<Patch />

## 配置

更改 `mpx.config.js` 注册 `weapp-tailwindcss`

```js title="mpx.config.js"
const { defineConfig } = require('@vue/cli-service')
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
const path = require('node:path')
const tailwindPostcss = require('@tailwindcss/postcss')
module.exports = defineConfig({
  outputDir: `dist/${process.env.MPX_CURRENT_TARGET_MODE}`,
  pluginOptions: {
    mpx: {
      plugin: {
        postcssInlineConfig: {
          // tailwindcss@4 需要在此处注册 @tailwindcss/postcss，详见 templates/mpx-tailwindcss-v4/mpx.config.js
          ignoreConfigFile: true,
          plugins: [tailwindPostcss()]
        },
        srcMode: 'wx',
        hackResolveBuildDependencies: ({ files, resolveDependencies }) => {
          const path = require('path')
          const packageJSONPath = path.resolve('package.json')
          if (files.has(packageJSONPath)) files.delete(packageJSONPath)
          if (resolveDependencies.files.has(packageJSONPath)) {
            resolveDependencies.files.delete(packageJSONPath)
          }
        }
      },
      loader: {}
    }
  },
  configureWebpack(config) {
    // 添加的代码在这里
    // highlight-start
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        appType: 'mpx',
        rem2rpx: true,
        cssEntries: [
          // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
          path.resolve(__dirname, './src/app.css'),
        ],
      })
    )
    // highlight-end
  }
})
```

> tailwindcss@4 必须配置 `cssEntries` 并且使用绝对路径，否则 `tailwindcss` 生成的类名不会参与转译。
> tailwindcss@4 下必须在 `mpx.config.js` 里用 `postcssInlineConfig` 注册 `@tailwindcss/postcss`（同仓库 `templates/mpx-tailwindcss-v4/mpx.config.js` 的写法），否则插件不会生效，无需再单独维护 `postcss.config.js`。

## 添加样式

在 `src/app.css` 中引入 `weapp-tailwindcss`：

```css title="src/app.css"
@import "weapp-tailwindcss";
```

> 💡 如果你希望在任意样式文件中直接引用包内样式，请使用 `@import "weapp-tailwindcss/index.css";`。这样可以确保 `postcss-import` 解析到的是真实的 CSS 资源，避免出现 “Unknown word "use strict"” 这一类由于误解析到 JS 文件导致的构建报错。

### Tailwind CSS 样式引用指引

- **Tailwind CSS v3.x**：沿用旧模块名即可（例如 `@import 'tailwindcss/base.css'`、`@import 'tailwindcss/components.css'`、`@import 'tailwindcss/utilities.css'`）。
- **Tailwind CSS v4.x**：推荐直接引入 `weapp-tailwindcss` 提供的聚合样式：

```html title="src/app.mpx"
<style lang="scss">
  @import 'weapp-tailwindcss/index.css';
</style>
```

这样可以一次性获得 base / components / utilities，并规避 `postcss-import` 误解析 JS 入口的报错。如果你是从 v3 升级，只需将原来的三个 `@import` 换成这条语句即可。

然后在项目目录下，小程序全局的 `app.mpx` 中，通过 `@import` 引入该文件：

```html title="app.mpx"
<style lang="css">
@import "./app.css";
</style>
```


更改好配置之后，直接启动即可


## 参考模版

https://github.com/icebreaker-template/mpx-tailwindcss-v4
